<template>
    <div class="staffmangement">
        <div class="query">
            <el-input v-model="name" placeholder="姓名/手机/邮箱" class="inputname" @input="serachname()"></el-input>
            <!-- 部门 -->
            <el-form :model="forms" :rules="rules" ref="forms" class="forms">
                <el-form-item label="部门" label-width="60px" prop="selectedProvince">
                    <el-select v-model="forms.selectedProvince" placeholder="请选择部门" class="selections" @change="handleProvinceChange">
                        <el-option
                        v-for="item in cities"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                        <span style="float: left" class="city">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <!-- 职称 -->
                    <el-form-item label="职务" label-width="60px" prop="selectedCity">
                    <el-select v-model="forms.selectedCity" placeholder="请选择职务" class="selections" @change="handleCityChange">
                        <el-option
                        v-for="item in filterselect"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                        <span style="float: left" class="city">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- <el-select v-model="value" placeholder="账号类型" class="selection">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="value" placeholder="添加时间" class="selection">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select> -->
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select('forms')"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert('forms')"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
        <div class="stafflists">
            <div class="buttonbox">
                <div class="left">
                    <el-button type="primary" class="add" @click="add"><i class="el-icon-plus"></i>新增员工</el-button>
                    <el-upload
                        ref="upload"
                        action="action"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                        :show-file-list="false"
                        :http-request="handlehttpRequest"
                        :on-change="onUploadChange"
                    >
                        <el-button plain class="nomalbutton" @click="importdata">导入</el-button>
                    </el-upload>
                    
                    <el-button plain class="nomalbutton" @click="exportdata">导出</el-button>
                    <el-button plain class="changebutton" @click="changepar"> 修改部门</el-button>
                    <el-button plain class="changebutton" @click="stopstaff"> 停用员工</el-button>
                    <el-button plain class="changebutton" @click="freezestaff"> 冻结员工</el-button>
                    <el-button plain class="changebutton" @click="reaseatpsw"> 重置密码</el-button>
                </div>
                <div class="right">
                    <el-button plain class="hand">手动排序</el-button>
                    <el-button plain class="hand" @click="sorts">按字母排序</el-button>
                </div>
            </div>
            <div class="datatable">
                <el-table
                :data="tableData"
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    type="selection"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="avators"
                    label="头像"
                    width="60">
                    <template slot-scope="scope">
                        <img :src=scope.row.avators alt="" style="width:30px;height:30px;border-radius:50%">
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="sex"
                    label="性别"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="department"
                    label="部门"
                    width="110">
                    </el-table-column>
                    <el-table-column
                    prop="position"
                    label="职务"
                    width="110">
                    </el-table-column>
                    <el-table-column
                    prop="phone"
                    label="手机"
                    width="130">
                    </el-table-column>
                     <el-table-column
                    prop="accountstatus"
                    label="账号状态"
                    width="100">
                    </el-table-column>
                     <el-table-column
                    prop="onlinestatus"
                    label="在线状态"
                    width="100">
                    <template slot-scope="scope">
                        <el-col :sm="12" :lg="6" class="success">
                            <el-result :icon=scope.row.onlinestatus title="" subTitle="">
                            </el-result>
                        </el-col>
                    </template>
                        
                    </el-table-column>
                    <el-table-column
                    prop="lastlogin"
                    label="最后登录"
                    width="140">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="240">
                        <template slot-scope="scope">
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="setup(scope.row)">{{ scope.row.sets }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="deactive(scope.row)">{{ scope.row.deactive }}</span>
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="freeze(scope.row)">{{ scope.row.freeze }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.staff_id)">{{ scope.row.del }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 新增员工 -->
                <el-dialog title="新增员工" :visible.sync="dialogFormVisible">
                    <el-form :model="form" :rules="rules" ref="form">
                        <el-form-item label="姓名" :label-width="formLabelWidth" class="namebox" prop="name">
                            <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" :label-width="formLabelWidth" class="namebox" prop="phone">
                            <el-input v-model="form.phone" autocomplete="off" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 部门 -->
                        <el-form-item label="部门" :label-width="formLabelWidth" prop="selectedProvince">
                        <el-select v-model="form.selectedProvince" placeholder="请选择部门" class="choice" @change="handleProvinceChange">
                            <el-option
                            v-for="item in cities"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            <span style="float: left" class="city">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <!-- 职称 -->
                        <el-form-item label="职务" :label-width="formLabelWidth" prop="selectedCity">
                        <el-select v-model="form.selectedCity" placeholder="请选择职务" class="choice" @change="handleCityChange">
                            <el-option
                            v-for="item in filteredCities"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            <span style="float: left" class="city">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="头像" :label-width="formLabelWidth" class="namebox">
                        <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1/access/updated"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="insertclose('form')">取 消</el-button>
                        <el-button type="primary" @click="insertsubmit('form')">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 新增员工信息 -->
                <el-dialog title="添加成功，您的信息如下" :visible.sync="infrmation">
                    <el-form :model="form" :rules="rules" ref="form">
                        <el-form-item label="姓名" :label-width="formLabelWidth" class="namebox" prop="name">
                            {{this.form.name}}
                        </el-form-item>
                        <el-form-item label="电话" :label-width="formLabelWidth" class="namebox" prop="phone">
                            {{this.form.phone}}
                        </el-form-item>
                        <el-form-item label="工号" :label-width="formLabelWidth" class="namebox" prop="name">
                            {{this.form.admin}}
                        </el-form-item>
                        <el-form-item label="初始密码" :label-width="formLabelWidth" class="namebox" prop="phone">
                            123456
                        </el-form-item>
                        <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                            {{this.form.sex}}
                        </el-form-item>
                        <!-- 部门 -->
                        <el-form-item label="部门" :label-width="formLabelWidth" prop="selectedProvince">
                            {{this.form.selectedProvince}}
                        </el-form-item>
                        <!-- 职称 -->
                        <el-form-item label="职务" :label-width="formLabelWidth" prop="selectedCity">
                            {{this.form.selectedCity}}
                        </el-form-item>
                        <el-form-item v-if="form.imageUrl" label="头像" :label-width="formLabelWidth" class="namebox">
                            <img  :src="this.form.imageUrl" class="avatar">
                        
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <!-- <el-button @click="insertclose('form')">取 消</el-button> -->
                        <el-button type="primary" @click="infrmationsubmit('form')">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 员工设置 -->
                <el-dialog title="员工设置" :visible.sync="staffset">
                    <el-form :model="set" :rules="rules" ref="set">
                        <el-form-item label="员工账号" :label-width="formLabelWidth" class="namebox" >
                            <!-- <el-input v-model="set.account" autocomplete="off" placeholder="请输入员工账号"></el-input> -->
                            {{this.set.admin}}
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth" class="namebox" prop="psw">
                            <el-input v-model="set.psw" :disabled="set.pswsta" autocomplete="off" type="password" placeholder="请输入密码"></el-input>
                            <el-button type="primary" plain class="changebutton" @click="changepswsta()">修改密码</el-button>
                        </el-form-item>
                        <el-form-item label="手机号" :label-width="formLabelWidth" class="namebox" prop="phone">
                            <el-input v-model="set.phone" :disabled="set.phonesta"  autocomplete="off" placeholder="请输入手机号"></el-input>
                            <el-button type="primary" plain @click="changephonesta" class="changebutton">修改手机号</el-button>
                        </el-form-item>
                        <el-form-item label="账号状态" prop="accountstatus" :label-width="formLabelWidth">
                            <el-radio-group v-model="set.accountstatus">
                                <el-radio label="正常"></el-radio>
                                <el-radio label="停用"></el-radio>
                                <el-radio label="冻结"></el-radio>
                                <el-radio label="离线"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 部门 -->
                        <el-form-item label="部门" :label-width="formLabelWidth" prop="partment">
                        <el-select v-model="set.selectedProvince" placeholder="请选择部门" class="choice" @change="handleProvinceChange">
                            <el-option
                            v-for="item in cities"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            <span style="float: left" class="city">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <!-- 职称 -->
                        <el-form-item label="职务" :label-width="formLabelWidth" prop="position">
                        <el-select v-model="set.selectedCity" placeholder="请选择职务" class="choice" @change="handleCityChange">
                            <el-option
                            v-for="item in filteredPosion"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            <span style="float: left" class="city">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="setuoclose('set')">取 消</el-button>
                        <el-button type="primary" @click="setupsubmit('set')">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 修改部门 -->
            <el-dialog title="修改部门" :visible.sync="deparshow" class="changepar">
                <el-form :model="depar" :rules="rules" ref="depar">
                    <el-form-item label="已选员工" :label-width="formLabelWidth" prop="tableDatas">
                        <el-table
                            class="inserinto"
                            :data="depar.tableDatas"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                            <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="department"
                            label="部门"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="position"
                            label="职务">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <!-- 部门 -->
                        <el-form-item label="修改部门" :label-width="formLabelWidth" prop="partment">
                        <el-select v-model="depar.partment" placeholder="请选择部门" class="choice" @change="handleProvinceChange">
                            <el-option
                            v-for="item in cities"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            <span style="float: left" class="city">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <!-- 职称 -->
                        <el-form-item label="修改职务" :label-width="formLabelWidth" prop="selectedCity">
                        <el-select v-model="depar.selectedCity" placeholder="请选择职务" class="choice" @change="handleCityChange">
                            <el-option
                            v-for="item in changePosion"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            <span style="float: left" class="city">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                    <!-- <el-form-item label="修改部门" :label-width="formLabelWidth" prop="partment">
                    <el-select v-model="depar.partment" placeholder="请选择修改部门" >
                        <el-option label="部门一" value="部门一"></el-option>
                        <el-option label="部门二" value="部门二"></el-option>
                    </el-select>
                    </el-form-item> -->
                    <el-form-item label="原因备注" :label-width="formLabelWidth"  prop="reson">
                            <el-input v-model="depar.reson" autocomplete="off" placeholder="请输入原因备注"></el-input>
                        </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="changedeparclose('depar')">取 消</el-button>
                    <el-button type="primary" @click="changedeparsubmit('depar')">确 定</el-button>
                </div>
            </el-dialog>
                <div class="block">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="50"
                    layout=" prev, pager, next, sizes,jumper"
                    :total="totalpage">
                    </el-pagination>
                </div>
            </div>
        </div>
        
    </div>
    
</template>

<script>
import Pagecurren from '../components/Pagecurren.vue'
import CryptoJS from 'crypto-js'
import { v4 as uuidv4 } from 'uuid';
import { readExcelToJson, saveJsonToExcel } from '../utils'
export default {
    components:{
        Pagecurren
    },
    data(){
        return{
            name:'',
            value:'',
            sort:true,
            options: [{
            value: '选项1',
            label: '物业费'
            }, {
            value: '选项2',
            label: '停车管理费'
            }, {
            value: '选项3',
            label: '车位管理费'
            }, {
            value: '选项4',
            label: '车位管理费'
            }, {
            value: '选项5',
            label: '车位管理费'
            }],
            input:'',
            value1:[],
            // tableData:[
            //     {
            //         date: '1',
            //         profilepicture: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            //         name: '李小明',
            //         sex:'男',
            //         department:'销售部',
            //         position:'销售总监',
            //         phonenumber:'18088888888',
            //         Accountstatus:'停用',
            //         Presence:'error',
            //         LastLogin:'2019-08-25 14:54',
            //         setup:'设置',
            //         Deactivate:'停用',
            //         freeze:'冻结',
            //         del:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         profilepicture: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            //         name: '李小明',
            //         sex:'男',
            //         department:'销售部',
            //         position:'销售总监',
            //         phonenumber:'18088888888',
            //         Accountstatus:'正常',
            //         Presence:'success',
            //         LastLogin:'2019-08-25 14:54',
            //         setup:'设置',
            //         Deactivate:'停用',
            //         freeze:'冻结',
            //         del:'删除',
            //     }, 
            //     {
            //         date: '3',
            //         profilepicture: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            //         name: '李小明',
            //         sex:'男',
            //         department:'销售部',
            //         position:'销售总监',
            //         phonenumber:'18088888888',
            //         Accountstatus:'冻结',
            //         Presence:'warning',
            //         LastLogin:'2019-08-25 14:54',
            //         setup:'设置',
            //         Deactivate:'停用',
            //         freeze:'冻结',
            //         del:'删除',
            //     }, 
            //     {
            //         date: '4',
            //         profilepicture: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            //         name: '李小明',
            //         sex:'男',
            //         department:'销售部',
            //         position:'销售总监',
            //         phonenumber:'18088888888',
            //         Accountstatus:'离线',
            //         Presence:'在线',
            //         LastLogin:'2019-08-25 14:54',
            //         setup:'设置',
            //         Deactivate:'停用',
            //         freeze:'冻结',
            //         del:'删除',
            //     }, 
            // ],
            tableData:[],
            datalists:[],
            currentPage2: 1,    //分页器当前页
            pagelimit:10,   //每页显示
            totalpage:300,  //总页数
            multipleSelection: [],
            dialogFormVisible: false,
            form: {
                name: '',
                phone:'',
                sex:'', 
                imageUrl:'',    //头像
                selectedProvince: '',   //部门
                selectedCity: '',       //职务
                admin:''
            },
            forms:{
                selectedProvince: '',   //部门
                selectedCity: '',       //职务
            },
            infrmation:false,
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                psw: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
                ],
                phone:[
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { min: 9, max: 11, message: '长度在 9 到 11 个字符', trigger: 'blur' }
                ],
                selectedProvince: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                selectedCity: [
                    { required: true, message: '请选择职务', trigger: 'change' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                accountstatus:[
                    { required: true, message: '请选择账号状态', trigger: 'change' }
                ],
                reson:[
                    { required: true, message: '请输入原因备注', trigger: 'blur' },
                ],
                select:[
                    {
                        required:true
                    }
                ],
                accountstatus:[
                    {
                        required:true
                    }
                ],
                partment:[
                    { required: true, message: '请选择部门名称', trigger: 'change' }
                ],
                tableDatas:[
                    {
                        required:true,message:'已选员工不能为空'
                    }
                ]
            },
            // 员工设置
            staffset: false,
            set: {
                psw:'',
                phone:'',
                accountstatus: '',
                selectedProvince: '',   //部门
                selectedCity: '',       //职务
                pswsta:true,
                phonesta:true,
                staffID:'',
                secretKey:'123acd.'
            },
            
            formLabelWidth: '120px',
            // 修改部门
            deparshow:false,
            tableDatas: [],
            depar:{
                partment:'',
                selectedCity:'',
                tableDatas: [],
                reson:''
            },
            cities: [
                {
                    value: 'Beijing',
                    label: '总裁办',
                    prefecturelevelcity:[
                        {
                            label:'CEO',
                            value:'Beijing1',
                        },
                        {
                            label:'CFO',
                            value:'Beijing2',
                        },
                        {
                            label:'CUO',
                            value:'Beijing3',
                        },
                        {
                            label:'秘书',
                            value:'Beijing4',
                        },
                    ]
                }, 
                {
                    value: 'HeNan',
                    label: '行政部',
                    prefecturelevelcity:[
                        {
                            label:'行政总监',
                            value:'Zhengzhou', 
                        },
                        {
                            label:'行政经理',
                            value:'Kaifeng', 
                        },
                        {
                            label:'行政部长',
                            value:'Hebi', 
                        },
                        {
                            label:'行政副经理',
                            value:'Xinxiang', 
                        },
                        {
                            label:'行政员工',
                            value:'Jiaozuo', 
                        }
                    ]
                },
                {
                    value: 'Shanghai1',
                    label: '人事部',
                    prefecturelevelcity:[
                        {
                            label:'人事经理',
                            value:'Shanghai1',
                        },
                        {
                            label:'人事专员',
                            value:'Shanghai2',
                        },
                        {
                            label:'人事员工',
                            value:'Shanghai3',
                        },
                    ]
                }, 
                {
                    value: 'TianJin',
                    label: '销售部',
                    prefecturelevelcity:[
                        {
                            label:'销售总监',
                            value:'Tianjin',
                        },
                        {
                            label:'销售经理',
                            value:'Tianjin2',
                        },
                        {
                            label:'业务员',
                            value:'Tianji3n',
                        },
                    ]
                }, 
                {
                    value: 'GuangDong1',
                    label: '技术部',
                    prefecturelevelcity:[
                        {
                            label:'产品经理',
                            value:'Guangzhou1',
                        },
                        {
                            label:'前端',
                            value:'Shenzhen1',
                        },
                        {
                            label:'UI设计师',
                            value:'Zhuhai1',
                        },
                        {
                            label:'后台',
                            value:'Shantou1',
                        },
                        {
                            label:'技术总监',
                            value:'Shaoguan1',
                        },
                    ]
                }, 
                {
                    value: 'GuangDong4',
                    label: '客服部',
                    prefecturelevelcity:[
                        {
                            label:'客服经理',
                            value:'Guangzhou4',
                        },
                        {
                            label:'客服专员',
                            value:'Shenzhen4',
                        },
                        {
                            label:'话务员',
                            value:'Zhuhai4',
                        },
                    ]
                }, 
                {
                    value: 'GuangDong3',
                    label: '售后部',
                    prefecturelevelcity:[
                        {
                            label:'售后经理',
                            value:'Guangzhou3',
                        },
                        {
                            label:'售后专员',
                            value:'Shenzhen3',
                        },
                        {
                            label:'售后服务员',
                            value:'Zhuhai3',
                        },
                    ]
                }, 
                {
                    value: 'GuangDong2',
                    label: '财务部',
                    prefecturelevelcity:[
                        {
                            label:'财务总监',
                            value:'Guangzhou2',
                        },
                        {
                            label:'财务经理',
                            value:'Shenzhen2',
                        },
                        {
                            label:'财务专员',
                            value:'Zhuhai2',
                        },
                    ]
                }, 
                {
                    value: 'GuangDong132',
                    label: '市场部',
                    prefecturelevelcity:[
                        {
                            label:'市场经理',
                            value:'Guangzhou132',
                        },
                        {
                            label:'市场总监',
                            value:'Shenzhen132',
                        },
                        {
                            label:'市场业务员',
                            value:'Zhuhai312',
                        },
                    ]
                }, 
            ],
        }
    },
    watch:{
        currentPage2:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((val-1)*this.pagelimit,val*this.pagelimit)
            },
        },
        pagelimit:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
            }
        },
        datalists:{
            handler(val,oldval){
                val.forEach(item=>{
                    item.lastlogin=this.moment(item.lastlogin).format("YYYY-MM-DD HH:mm:ss")
                })
            }
        }
    },
    //三级联动筛选   
    computed: {
        // 选中省筛选市
        filteredCities() {
            return this.cities.find(p => p.label === this.form.selectedProvince)?.prefecturelevelcity || [];
        },
        filteredPosion(){
            return this.cities.find(p => p.label === this.set.selectedProvince)?.prefecturelevelcity || [];
        },
        changePosion(){
            return this.cities.find(p => p.label === this.depar.partment)?.prefecturelevelcity || [];
        },
        filterselect(){
            return this.cities.find(p => p.label === this.forms.selectedProvince)?.prefecturelevelcity || [];
        },
        // 选中市筛选县（区）
        filteredDistricts() {
            return this.filteredCities.find(c => c.label === this.form.selectedCity)?.districts || [];
        }
    },
    mounted(){
        this.$axios.get('http://127.0.0.1/stafflists',{
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            },
        }).then(res=>{
            this.datalists=res.data
            this.totalpage=res.data.length
            this.tableData=res.data.slice(0,10)
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        select(formName){
            
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    // console.log('查询',this.forms)
                    this.$axios.post('http://127.0.0.1/staffpartersearch',{
                        ...this.forms
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                    }).catch(err=>{
                        console.log(err)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        reasert(formName){
            this.$refs[formName].resetFields();
            this.$axios.get('http://127.0.0.1/stafflists',{
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            },
        }).then(res=>{
            this.datalists=res.data
            this.totalpage=res.data.length
            this.tableData=res.data.slice(0,10)
        }).catch(err=>{
            console.log(err)
        })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页器打印
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        add(){
            // 生成随机id
            // const randomId = uuidv4();
            // console.log(BigInt(`0x${randomId.replace(/-/g, '')}`).toString().slice(0, 8))
            this.dialogFormVisible = true
        },
        insertsubmit(formName){
            console.log('新增',this.form)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    
                    const randomId = uuidv4();
                    this.form.admin=BigInt(`0x${randomId.replace(/-/g, '')}`).toString().slice(0, 8)
                    // this.$refs[formName].resetFields();
                    this.$axios.post('http://127.0.0.1/stafflistsinsert',{
                        ...this.form,
                        admin:BigInt(`0x${randomId.replace(/-/g, '')}`).toString().slice(0, 8),
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.dialogFormVisible=false
                        this.infrmation=true
                        this.$message({
                            type: 'success',
                            message: '员工添加成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            
        },
        infrmationsubmit(formName){
            this.infrmation=false
            this.$refs[formName].resetFields();
        },
        insertclose(formName){
            this.dialogFormVisible=false
            this.form.imageUrl=''
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            this.form.imageUrl='http://127.0.0.1'+res.filePath
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt20M = file.size / 1024 / 1024 < 20;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt20M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt20M;
        },
        // 三次联动点击事件
        handleProvinceChange() {
            this.form.selectedCity = '';
            this.forms.selectedCity = '';
            this.set.selectedCity=''    ;
            this.depar.selectedCity=''    ;
            this.selectedDistrict = '';
        },
        handleCityChange() {
            this.selectedDistrict = '';
        },
        setup(txt){
            // console.log(CryptoJS.AES.decrypt(txt.psw, this.set.secretKey).toString(CryptoJS.enc.Utf8))
            this.staffset=true
            this.set.admin=txt.admin
            this.set.psw=CryptoJS.AES.decrypt(txt.psw, this.set.secretKey).toString(CryptoJS.enc.Utf8)
            this.set.selectedProvince=txt.department
            this.set.selectedCity=txt.position
            this.set.accountstatus=txt.accountstatus
            this.set.phone=txt.phone
            this.set.staffID=txt.staff_id
            this.set.pswsta=true
            this.set.phonesta=true
        },
        setupsubmit(formName){
            this.staffset = false
            this.$axios.post('http://127.0.0.1/stafflistssetup',{
                ...this.set,
                password:CryptoJS.AES.encrypt(this.set.psw, this.set.secretKey).toString()
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                },
            }).then(res=>{
                this.datalists=res.data
                this.totalpage=res.data.length
                this.tableData=res.data.slice(0,10)
                this.$message({
                    type: 'success',
                    message: '员工设置成功!'
                });
            }).catch(err=>{
                console.log(err)
            })
        },
        setuoclose(formName){
            this.staffset = false
        },
        changepswsta(){
            this.set.pswsta=false
        },
        changephonesta(){
            this.set.phonesta=false
        },
        deactive(data){
            console.log('停用',data)
            if(data.accountstatus=='停用'){
                this.$confirm('此操作是启用操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://127.0.0.1/stafflistsdeactive',{
                        accountstatus:'正常',
                        onlinestatus:'success',
                        staffID:data.staff_id
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });          
                });
            }else{
                this.$confirm('此操作是停用操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://127.0.0.1/stafflistsdeactive',{
                        accountstatus:'停用',
                        onlinestatus:'error',
                        staffID:data.staff_id
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });          
                });
            }
            
        },
        freeze(data){
            console.log('冻结',data)
            if(data.accountstatus=='冻结'){
                this.$confirm('此操作是启用操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://127.0.0.1/stafflistsdeactive',{
                        accountstatus:'正常',
                        onlinestatus:'success',
                        staffID:data.staff_id
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });          
                });
            }else{
                this.$confirm('此操作是冻结操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('http://127.0.0.1/stafflistsdeactive',{
                        accountstatus:'冻结',
                        onlinestatus:'warning',
                        staffID:data.staff_id
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });          
                });
            }
        },
        del(i){
            console.log('删除',i)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('http://127.0.0.1/stafflistsdel',{
                    staffID:i
                },{
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res=>{
                    this.datalists=res.data
                    this.totalpage=res.data.length
                    this.tableData=res.data.slice(0,10)
                }).catch(err=>{
                    console.log(err)
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        importdata(){
            console.log('导入')
        },
        handlehttpRequest() {},

        // 读取文件为json数据
        onUploadChange(file) {
        // console.log(file)
        this.file = file
        readExcelToJson(file).then((res) => {
            this.datalists = res
            this.totalpage=res.length
            this.tableData=res.slice(0,10)
            console.log(res.length)
        })
        },
        exportdata(){
            console.log('导出')
            saveJsonToExcel(this.datalists, 'staff.xlsx')
        },
        changepar(){
            console.log('修改部门')
            this.deparshow=true
            this.depar.tableDatas=this.multipleSelection

        },
        changedeparsubmit(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post('http://127.0.0.1/stafflistschangeall',{
                        ...this.depar
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.deparshow = false
                        this.$refs[formName].resetFields();
                    }).catch(err=>{
                        console.log(err)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        changedeparclose(formName){
            this.deparshow = false
            this.$refs[formName].resetFields();
        },
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
            return 'warning-row';
            } else if (rowIndex === 3) {
            return 'success-row';
            }
            return '';
        },
        changepoi(){
            console.log('修改职务')
        },
        stopstaff(){
            console.log('停用员工')
        },
        freezestaff(){
            console.log('冻结员工')
        },
        reaseatpsw(){
            console.log('重置密码')
        },
        serachname(){
            // console.log(this.name)
            this.$axios.post('http://127.0.0.1/stafflistssearch',{
                value:this.name
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                },
            }).then(res=>{
                this.datalists=res.data
                this.totalpage=res.data.length
                this.tableData=res.data.slice(0,10)
            }).catch(err=>{
                console.log(err)
            })
        },
        sorts(){
            if(this.sort){
                this.$axios.get('http://127.0.0.1/staffpartersort',{
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res=>{
                    this.datalists=res.data
                    this.totalpage=res.data.length
                    this.tableData=res.data.slice(0,10)
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                this.$axios.get('http://127.0.0.1/stafflists',{
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res=>{
                    this.datalists=res.data
                    this.totalpage=res.data.length
                    this.tableData=res.data.slice(0,10)
                }).catch(err=>{
                    console.log(err)
                })
            }
            this.sort=!this.sort
            
        }
    }
}
</script>

<style lang="scss" scoped>
    .staffmangement{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        
        .query{
            width: 1260px;
            height: 95px;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border:  1px solid rgba(233, 233, 233, 1);
            padding-left: 20px;
            position: relative;
            .selection,.inputname{
                width: 180px;
                margin-right: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            .forms{
                display: flex;
                .el-form-item {
                    margin-bottom: 0;
                }
            }
            // 查询按钮
            .chaxun{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0079fe !important;
                .el-icon-search{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .chaxun:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            // 重置按钮
            .reaseat{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff !important;
                .el-icon-refresh-right{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .reaseat:hover{
                border-color: #0079fe !important;
                color: #0079fe !important;
            }
        }
        .stafflists{
            width: 100%;
            height: 120%;
            margin-top: 20px;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            // margin-left: 20px;
            .buttonbox{
                display: flex;
                justify-content: space-between;
                .right{
                    .hand:hover{
                        border-color: #0079fe !important;
                        color: #0079fe !important;
                        background-color: #fff !important;
                    }
                }
            }
            .left{
                display: flex;
                align-items: center;
                .add{
                    width: 100px;
                    height: 35px;
                    background-color: #0079fe;
                    padding: 0;
                    .el-icon-plus{
                        font-weight: 700;
                        margin-right: 5px;
                    }
                }
                .add:hover{
                    background-color: #66b1ff !important;
                    color: #fff !important;
                }
                .nomalbutton{
                    width: 80px;
                    height: 35px;
                    padding: 0;
                    margin-left: 10px;
                }
                .changebutton{
                    width: 110px;
                    height: 35px;
                    padding: 0;
                }
                .nomalbutton:hover,.changebutton:hover{
                    border-color: #0079fe !important;
                    color: #0079fe !important;
                    background-color: #fff !important;
                }
            }
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                    text-align: center;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    line-height: 50px !important;
                    padding: 0 !important;
                    text-align: center;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    color: #666 !important;
                    text-align: center !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    text-align: center;
                    color: #0079fe;
                    // cursor: pointer;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                    cursor: pointer;
                    text-decoration: underline !important;
                    // color: #4a4a4a;
                }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(3){
                    color: #999 !important;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .cell{
                        display: flex;
                        justify-content: center;
                    }
                    .el-result{
                        padding: 0;
                    }
                }
                ::v-deep .el-result__icon svg {
                    width: 20px;
                    height: 20px;
                }
            }
            
            .changepar{
                .inserinto .warning-row td{
                    background: oldlace !important;
                }

                .el-table .success-row {
                    background: #f0f9eb !important;
                }
            }
            .namebox{
                width: 500px;
                ::v-deep .el-form-item__content{
                    display: flex;
                }
                .changebutton{
                    margin-left: 20px;
                    ::v-deep span{
                        display: block;
                        width: 70px !important;
                    }
                }
                ::v-deep .avatar-uploader .el-upload {
                    border: 1px dashed #d9d9d9 !important;
                    border-radius: 6px !important;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }
                .avatar-uploader .el-upload:hover {
                    border-color: #409EFF;
                }
                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    text-align: center;
                }
                .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }
             
            // 分页
            .block{
                display: flex;
                justify-content: end;
                ::v-deep .el-pagination__sizes{
                    margin-left: 10px;
                    width: 80px;
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .btn-prev,::v-deep .el-pager li,::v-deep .btn-next{
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    background-color: #fff;
                    border: 1px solid rgba(228, 228, 228, 1);
                }
                ::v-deep .el-pager .active{
                    background-color: #0079fe !important;
                }
                ::v-deep .el-pager .active:hover{
                    color: #fff !important;
                    border: 1px solid rgb(228, 228, 228) !important;
                    box-sizing: border-box;
                }
                ::v-deep .el-pager li:hover,::v-deep .btn-prev:hover,::v-deep .btn-next:hover,::v-deep  .el-pagination__sizes .el-input .el-input__inner:hover {
                    border-color: #0079fe;
                    color: #0079fe;
                }
                ::v-deep .el-input--mini .el-input__inner,::v-deep .el-input--mini .el-input__icon {
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .el-pagination .el-select .el-input {
                    width: 86px;
                    margin: 0 5px;
                }
                ::v-deep .el-pagination__jump{
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .el-input__inner:focus {
                    border-color: rgb(228, 228, 228) !important;
                    outline: 0;
                }
            }
        }
    }
</style>